<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/common.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .form-item {
            margin-top: 10px;
        }

        .tips {
            font-size: 12px;
        }
        .createCode{
            user-select: none;
        }
    </style>
</head>

<body>
    <!-- 
        label标签配合input标签配合实现点击文本,自动聚焦的操作

        (1) 先给input标签设置id名, 通过label标签的for属性设置对应的id名  =>   麻烦(需要多个id名)
        (2) 直接用label标签包裹input标签即可 (此时label无需添加for属性)

     -->
    <div class="register-bar">
        <p class="form-item">
            <label for="user">用户名:</label><input id="user" class="user" type="text">
            <span class="user-tips tips"></span>
        </p>
        <p class="form-item">
            <label>密&emsp;码:<input class="pwd" type="text"></label>
            <span class="pwd-tips tips"></span>
        </p>
        <p class="form-item">
            <label>确&emsp;认:<input class="repwd" type="text"></label>
            <span class="repwd-tips tips"></span>
        </p>
        <p class="form-item">
            <label>验证码:<input class="code" type="text"></label>
            <span class="createCode">jq0b</span>
            <span class="code-tips tips"></span>
        </p>
        <p class="form-item">
            <button class="btn">注册</button>
        </p>
    </div>
</body>
<script>
    // 需求: 点击注册按钮,对输入框中的用户名进行校验 

    // 用户名要求
    // 由 数字 大小写字母 _ 组成, 6-12位, 且不能以数字开头

    // 按照从易到难的顺序写:
    // (1) 6-12位 (字符串长度6-12)
    // (2) 不能以数字开头 (以非数字开头)
    // (3) 由 数字 大小写字母 _ 组成 => 每一个字符都是都是数字/大小写字母/_(合法字符) ,除此三者之外的字符(非法字符)
    //      判断每一个字符是否都是合法的?

    // 分析: 判断组成 =>  判断每一个字符是否都是合法的?  假设法: 假设都是合法的,找一个非法的即可推翻假设
    // 合法范围         ASCII
    // 数字            48 - 57         charCode>=48 && charCode <= 57
    // 大写字符        65 - 90         charCode>=65 && charCode <= 90
    // 小写字符        97 - 122        charCode>=97 && charCode <= 122
    // 下划线           95             charCode == 95

    // 合法条件
    // charCode>=48 && charCode <= 57 ||  charCode>=65 && charCode <= 90 || charCode>=97 && charCode <= 122 || charCode == 95

    // 非法:
    // !(charCode>=48 && charCode <= 57 ||  charCode>=65 && charCode <= 90 || charCode>=97 && charCode <= 122 || charCode == 95)


    // 创建一个数组包含所有的合法字符 数字 大小写字母 _
    // var normalList = ["0","1","2","3","4","a","z","A","Z","_"];  // 手搓(一个一个敲 => 麻烦  => 字符对应的编码范围已经)

</script>
<script>

    // (1) 对应class名获取元素 document.getElementsByClassName()  => 方法返回的是包含给定class名的元素的集合(数组)  存在就返回集合(数组),不存在[]

    // var result = document.getElementsByClassName("user");
    // console.log(result); // 包含给定class名的元素的集合(数组)
    // console.log(result[0]); // 取出获取的元素

    // 单元素取值(确定页面中的元素只有一个 1. 先对应class名获取元素 => 数组  2. 取出该元素)
    var userInp = document.getElementsByClassName("user")[0];
    var userTips = document.getElementsByClassName("user-tips")[0];
    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdTips = document.getElementsByClassName("pwd-tips")[0];
    var repwdInp = document.getElementsByClassName("repwd")[0];
    var repwdTips = document.getElementsByClassName("repwd-tips")[0];
    var codeInp = document.getElementsByClassName("code")[0];
    var codeTips = document.getElementsByClassName("code-tips")[0];
    var createCodeSpan = document.getElementsByClassName("createCode")[0];

    var btn = document.getElementsByClassName("btn")[0];
    console.log(userInp, userTips, btn);

    createCodeSpan.innerText =  randCode();
    
    createCodeSpan.onclick = function(){
        createCodeSpan.innerText =  randCode();
    }

    // (2) 绑定点击事件
    btn.onclick = function () {

        // 点击取值
        var user = userInp.value;
        var pwd = pwdInp.value;
        var repwd = repwdInp.value;
        var code = codeInp.value;
        console.log(user, pwd, repwd, code);  // 字符串类型

        var userLen = user.length;

        // 校验长度
        if (userLen >= 6 && userLen <= 12) {
            console.log("userLen Ok");

            // 校验开头(第一个字符)  =>  不能以数字开头 (以非数字开头)
            // (1)  直接验证数字: firstChar >= 0 && firstChar <= 9   => 条件取反 => 非数字
            // (2)  通过字符编码校验数字: firstCharCode >= 48 && firstCharCode <= 57   => 条件取反 => 非数字
            // (3)  通过isNaN() 校验, 是非数字返回true  数字返回false

            // 方法1:
            // var firstChar = user.charAt(0);

            // if(!(firstChar >= 0 && firstChar <= 9)){
            //     userTips.innerText = "√";
            //     userTips.style.color = "green";
            // }else{
            //     userTips.innerText = "用户名不能以数字开头!";
            //     userTips.style.color = "red";
            // }

            // 方法2: 
            // var firstCharCode = user.charCodeAt(0);

            // if(!(firstChar >= 48 && firstChar <= 57)){
            //     userTips.innerText = "√";
            //     userTips.style.color = "green";
            // }else{
            //     userTips.innerText = "用户名不能以数字开头!";
            //     userTips.style.color = "red";
            // }

            // 方法3:  isNaN

            var firstChar = user.charAt(0);
            if (isNaN(firstChar)) {
                console.log("开头 ok!");

                // 校验组成 =>  判断每一个字符是否都是合法的?     假设法: 假设都是合法的,找一个非法的即可推翻假设

                /* var flag = true; // 假设全都合法
                for (var i = 0; i < user.length; i++) {
                    var charCode = user.charCodeAt(i); // 对应下标的字符的编码
                    // 通过字符编码找非法字符
                    if(!(charCode>=48 && charCode <= 57 ||  charCode>=65 && charCode <= 90 || charCode>=97 && charCode <= 122 || charCode == 95)){
                        flag = false;
                        break;
                    }

                    
                }*/

                var flag = true; // 假设全都合法
                for (var i = 0; i < user.length; i++) {
                    var char = user.charAt(i); // 对应下标的字符
                    // 字符在normalList中存在 => 合法   不存在 => 非法
                    if (!normalList.includes(char)) {
                        flag = false;
                        break;
                    }
                }

                if (flag) {
                    userTips.innerText = "√";
                    userTips.style.color = "green";
                } else {
                    userTips.innerText = "用户名由数字 大小写字母 下划线组成!";
                    userTips.style.color = "red";
                }

            } else {
                userTips.innerText = "用户名不能以数字开头!";
                userTips.style.color = "red";
            }



        } else {
            userTips.innerText = "用户名需要在6-12位之间!";
            userTips.style.color = "red";
        }

        var isPwdOk = false;
        if (pwd.length >= 6 && pwd.length <= 12) {
            var flag = true; // 假设全都合法
            for (var i = 0; i < pwd.length; i++) {
                var char = pwd.charAt(i); // 对应下标的字符
                // 字符在normalList中存在 => 合法   不存在 => 非法
                if (!normalList.includes(char)) {
                    flag = false;
                    break;
                }
            }

            if (flag) {


                // 密码强度校验 (是否存在数字 大写 小写 特殊字符)
                var isExistNum = false;
                var isExistBig = false;
                var isExistSmall = false;
                var isExistSpe = false;

                for (var val of pwd) {
                    if (numList.includes(val)) isExistNum = true;
                    else if (bigList.includes(val)) isExistBig = true;
                    else if (smallList.includes(val)) isExistSmall = true;
                    else if (speList.includes(val)) isExistSpe = true;
                }

                var level = isExistNum + isExistBig + isExistSmall + isExistSpe;
                console.log(level);

                switch (level) {
                    case 1:
                        pwdTips.innerText = "密码强度:弱";
                        break;
                    case 2:
                        pwdTips.innerText = "密码强度:中";
                        break;
                    case 3:
                        pwdTips.innerText = "密码强度:强";
                        break;
                    case 4:
                        pwdTips.innerText = "密码强度:超强";
                        break;
                }


                pwdTips.style.color = "green";

                isPwdOk = true;




            } else {
                pwdTips.innerText = "密码由数字 大小写字母 下划线组成!";
                pwdTips.style.color = "red";
            }


        } else {
            pwdTips.innerText = "密码需要在6-12位之间!";
            pwdTips.style.color = "red";
        }


        if (pwd) { // 要先输入密码 

            if (isPwdOk) { // 校验密码是否正确
                if (repwd) {
                    if (pwd === repwd) {
                        repwdTips.innerText = "√";
                        repwdTips.style.color = "green";
                    } else {
                        repwdTips.innerText = "两次密码输入不一致";
                        repwdTips.style.color = "red";
                    }
                } else {
                    repwdTips.innerText = "请再次输入!";
                    repwdTips.style.color = "red";
                }
            } else {
                repwdTips.innerText = "密码格式有误,请先修改密码";
                repwdTips.style.color = "red";
            }

        } else {
            repwdTips.innerText = "请先输入密码";
            repwdTips.style.color = "red";
        }


        if(code){
            // 同时转小写之后再比较
            if(code.toLowerCase() == createCodeSpan.innerText.toLowerCase()){
                codeTips.innerText = "√";
                codeTips.style.color = "green";
            }else{
                codeTips.innerText = "验证码输入有误";
                codeTips.style.color = "red";
            }
        }else{
            codeTips.innerText = "请输入验证码";
            codeTips.style.color = "red";
        }






    }







</script>

</html>